/**
 * Created by kroyoshi on 2017/8/23.
 */
@charset "utf-8";
@import "common/minxincommon";


.user-content{
  .info-title{
    border:none;
    margin-bottom: 1px;
  }
}


//3.需求
//3.1需求列表
.content-demand{
  background-color: #cccccc;
  //赛选组
  .search-wrap{
    position: relative;
    padding: 30px 50px;
    margin-bottom: 1px;
    background-color: #ffffff;
    .tran-wrap{
      position: relative;
      float: left;
      font-size: 0;
      margin-right: 40px;
      span,div,input{
        display: inline-block;
        font-size:16px;
        color: #666666;
      }
      div,input{
        height:36px;
        line-height: 36px;
        margin-left:13px;
      }
      input{
        padding: 0 10px;
        border: 1px solid #cccccc;
      }
    }
    .select{
      position: relative;
      cursor: pointer;
      border: none;
      .text{
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 10px;
        margin-left:0;
        background: transparent;
      }
      .selectOff{
        position: absolute;
        top: 12px;
        right: 10px;
        width: 12px;
        height: 12px;
        font-size:0;
        background: url(../img/user/se-down.png) no-repeat center;
        cursor: pointer;
        @include transition;
      }
    }  
    .select.active{
      .selectOff{
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg);
      }
    }  
    .wrap-bottom{
      margin-top: 20px;
    }
    .tran-date{
      margin-right: 0;
      &>div{
        width:188px;
      }
      .select{
        .selectOff{
           transition: none;
           background-image: url(../img/user/icon-date.png); 
        }
      }
    }
    .btn-search{
      width:120px;
      height:36px;
      color: #fff;
      text-align: right;
      padding-right: 35px;
      background: url(../img/user/c-search.png) no-repeat 30% center;
      background-color: $color-active;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
    }
  }
  //需求列表
  .demandlist{
  }
  .list-d{
    position: relative;
    width:100%;
    height: 240px;
    margin-bottom: 1px;
    background: #fff;
    overflow: hidden;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    a{
      display: block;
      width:100%;
      height:100%;
      padding: 30px 50px 20px;
    }
    &:hover{
      z-index: 9;
      -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,.3);
      -moz-box-shadow: 0px 2px 10px rgba(0,0,0,.3);
      box-shadow: 0px 2px 10px rgba(0,0,0,.3);
    }
    //文字描述
    .list-text{
      .text-head{
        font-size:0;
        color: #333333;
        margin-bottom: 15px;
        span{
          font-size:16px;
        }
        .text-state{
          font-weight:bold;
          margin-left: 20px;
        }
      }
      p{
        height:30px;
        line-height: 30px;
        font-size: 16px;
        color: #666666;
        span{
          color: #999999;
        }
      }
    }
    .list-table{
      position: absolute;
      right:50px;
    }
    //图表描述
    .list-table{
      .design-type{
        width:195px;
        height:100px;
        padding-left: 30px;
        border-left: 1px solid #cccccc;
        text-align: center;
        vertical-align: middle;
        margin: 40px 0;
        //两个div
        div{
          height: auto;
          text-align: right;
          margin-bottom: 10px;
          p{
            color: $color-active;
            font-size:18px;
            font-weight:bold;
          }
          span{
            font-size:14px;
            color: #666666;
          }
        }
        //一个
        div.odd{
          margin-bottom:0;
          margin-top: 27px;
        }
      }
      .flowchart{
        margin: 58px 0;
        .chart{
          margin-right: 26px;
          div{
            width:40px;
            height:40px;
            margin:0 auto 5px;
          }
          span{
            font-size: 16px;
            color: #cccccc;
          }
        }
        .first,.second,.third{
          div{
            position: relative;
          }
          div:after{
            position: absolute;
            top:50%;
            right:-40px;
            display: block;
            content: '';
            width:30px;
            height:1px;
            background: #ccc;
          }
        }
        //默认值
        .fifth{
          display: none;
        }
        //当外观设计与结构设计都存在时的显示效果
        .charteven{
          position: relative;
          top:-50px;
          width:122px;
          height:165px;
          .fifth,.fourth{
            display: block;
            position: absolute;
            right:0;
          }
          .fourth{
            top:0;
          }
          .fifth{
            bottom: 0;
          }
          &:before{
            position: absolute;
            top:-12px;
            left:-45px;
            display: block;
            content: '';
            width:100%;
            height:100%;
            background: url(../img/user/demand/xian.png) no-repeat center;
          }
        }
        .first{
          div{
            background: url(../img/user/demand/icon-q.png) no-repeat center;
          }
        }
        .second div{
          background: url(../img/user/demand/icon-d.png) no-repeat center;
        }
        .third div{
          background: url(../img/user/demand/icon-h.png) no-repeat center;
        }
        .fourth div{
          background: url(../img/user/demand/icon-w.png) no-repeat center;
        }
        .fifth div{
          background: url(../img/user/demand/icon-g.png) no-repeat center;
        }
        //2.该步骤正在进行时的状态
        .chart.under {
          div:after{
            background-color: $color-active;
          }
          span{
            color: $color-active;
          }
        }
        .second.under div{
          background-image: url(../img/user/demand/icon-da.png);
        }
        .third.under div{
          background-image: url(../img/user/demand/icon-ha.png);
        }
        .fourth.under div{
          background-image: url(../img/user/demand/icon-wa.png);
        }
        .fifth.under div{
          background-image: url(../img/user/demand/icon-ga.png);
        }
        .charteven.under:before{
          background-image: url(../img/user/demand/xian-active.png);
        }
        //3.该步骤已经完成时的状态
        .chart.active{
          div{
            background-image: url(../img/user/demand/icon-comp.png);
          }
        }
      }
    }
  }
}


